<template>
  <div class="floatball-view">
    <FloatingBall 
      @textResponse="handleTextResponse"
      @voiceError="handleVoiceError"
      @voiceInitialized="handleVoiceInitialized"
    />
  </div>
</template>

<script>
import FloatingBall from '@/components/FloatingBall.vue'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'FloatBallView',
  components: { FloatingBall },
  computed: {
    ...mapState(['voiceState', 'sessionId'])
  },
  async mounted() {
    // 获取SessionID
    await this.fetchSessionId()
  },
  methods: {
    ...mapActions(['fetchSessionId']),
    
    handleTextResponse(message) {
      console.log('收到文本响应:', message)
    },
    
    handleVoiceError(error) {
      console.error('语音错误:', error)
    },
    
    handleVoiceInitialized() {
      console.log('语音服务已初始化')
    }
  }
}
</script>

<style scoped>
.floatball-view {
  width: 100%;
  height: 100%;
  background: transparent; /* 透明背景，配合 BrowserWindow transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
</style>